<template>
    <div id="swiperTop">
        <van-swipe :autoplay="3000" :height="160" :indicator-color="'rgb(219, 130, 130)'">
            <van-swipe-item v-for="(image, index) in state.images" :key="index">
                <img v-lazy="image.pic" />
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import axios from 'axios'
import { getBanner } from '@/request/api/home'
import { onMounted, reactive } from 'vue'
export default {
    name: 'HtmlSwiperTop',

    setup() {
        const state = reactive({
            images: [

            ]
        });
        onMounted(async () => {
            // axios.get('http://localhost:3000/banner?type=2').then((res) => {
            //     console.log(res);
            //     state.images = res.data.banners
            // })
            let res = await getBanner()
            state.images = res.data.banners
            console.log(res);
        })
        return { state };
    },

    methods: {

    },
};
</script>

<style lang="less">
#swiperTop {
    .van-swipe {
        width: 100%;
        height: 3.2rem;

        .van-swipe-item {
            padding: 0 0.2rem;

            img {
                width: 100%;
                height: 100%;
                border-radius: 0.2rem;
            }
        }
    }
}
</style>